<template>
  <div class="container">
    <el-form :model='searchList' ref='searchList' size='normal'>
      <el-row :gutter='20'>
        <el-col :span='8' :offset='0'>
          <el-form-item label=''>
            <el-input v-model='searchList.loginname' placeholder="登陆账号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <el-form-item label=''>
            <el-input v-model='searchList.mobile' placeholder="手机号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8' :offset='0'>
          <div class='right'>
            <el-button type='primary' size='medium' @click='onAdd'>添加</el-button>
            <el-button type='primary' size='medium' @click='search'>查询</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-alert title="账号支持开设多个,无上限设置" type="success" effect="light" show-icon :closable="false"></el-alert>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-alert title="请不要填写重复的手机号,会导致数据重复,保存失败" type="error" effect="light" show-icon :closable="false"></el-alert>
      </el-col>
    </el-row>

    <el-table :data='tableData.results' border stripe :height='offsetHeight' v-loading='loading' ref='tableData'>
      <el-table-column type='index' label='序号' width='80' align='center'>
      </el-table-column>
      <el-table-column prop='company_name' label='归属公司' align='center'>
      </el-table-column>
      <el-table-column prop='login_name' label='登录账号' width='150' align='center'>
      </el-table-column>
      <el-table-column prop='name' label='登陆名' align='center'>
      </el-table-column>
      <el-table-column prop='mobile' label='手机' width='150' align='center'>
      </el-table-column>
      <el-table-column label='操作' width='100' align='center'>
        <template slot-scope='{row}'>
          <el-button type="primary" size="mini" @click="edit(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class='page'>
      <el-pagination @size-change='pageSizeChange' @current-change='pageNoChange' :page-sizes='[10, 50, 100, 200]'
        :page-size='10' layout='total, sizes, prev, pager, next' :total='tableData.totalRecord'>
      </el-pagination>
    </div>

    <!-- 添加 -->
    <el-drawer title="账号信息" :visible.sync="userShow" size="60%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <div class="container">
        <el-alert title="请不要填写重复的手机号,会导致数据重复,保存失败" type="error" effect="light" show-icon :closable="false"></el-alert>
        <el-form :model="userList" ref="userList" size="normal" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="归属机构:">
                <el-input v-model="userList.company_name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="登录账号:">
                <el-input v-model="userList.login_name" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="归属部门:">
                <el-input v-model="userList.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="登录名:" prop="name">
                <el-input v-model="userList.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="登陆手机:" prop="mobile">
                <el-input v-model="userList.mobile" placeholder="15966668888 或 024-66668888"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="能否登录:" prop="login_flag">
                <el-radio-group v-model="userList.login_flag" size="normal" class="wid">
                  <el-radio-button label="1">能</el-radio-button>
                  <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="密码:" prop="password">
                <el-input v-model="userList.password" placeholder="字母、特殊符号和数组，超过8位，例:Te8*3810"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="确认密码:" prop="passwordc">
                <el-input v-model="userList.passwordc"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="用户角色:">
                <el-select v-model="userList.rolelist" value-key="rolelist" clearable class="wid" multiple>
                  <el-option v-for="item in userPower" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="center">
          <el-button type="danger" size="default" @click="cancel">取消</el-button>
          <el-button type="primary" size="default" @click="save" v-if="userList.id">修改</el-button>
          <el-button type="primary" size="default" @click="add" v-else>新增</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 270,
      loading: false,
      searchList: {},
      userPower: [],
      tableData: [],
      pageNo: '1',
      pageSize: '10',
      userList: {},
      userShow: false,
      rules: {
        name: [
          { required: true, message: '请填写登录名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, validator: this.$util.isPhone, trigger: 'blur' }
        ],
        login_flag: [
          { required: true, message: '请选择是否可以登录', trigger: 'change' }
        ],
        password: [
          { required: true, validator: this.$util.isPsd, trigger: 'blur' }
        ],
        passwordc: [
          { required: true, validator: this.$util.isPsd, trigger: 'blur' }
        ],
      }
    }
  },
  created () {
  },
  mounted () {
    this.power()
    this.init()
  },
  methods: {
    async power () {
      const res = await this.$http('sysUserRole', {
        company_id: this.user.company_id,
        flag: 1
      })
      this.userPower = res
    },
    async init () {
      this.loading = true
      const res = await this.$http('sysUserPage', {
        id: this.user.company_id,
        ...this.searchList,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        del_flag: 0
      })
      this.tableData = res
      this.loading = false
    },
    search () {
      this.pageNo = '1'
      this.pageSize = '10'
      this.init()
    },
    onAdd () {
      this.userList = {
        company_name: this.user.company_name,
        login_flag: '1'
      }
      this.userShow = true
    },
    async edit (item) {
      const res = await this.$http('sysUserObj', {
        ...item, contain_role: '1'
      })
      let role = []
      res.rolelist.forEach(item => {
        role.push(item.id)
      })
      this.userList = {
        id: res.id,
        company_code: res.company_code,
        company_name: res.company_name,
        mobile: res.mobile,
        login_flag: res.login_flag,
        login_name: res.login_name,
        name: res.name,
        email: res.email,
        no: res.no,
        rolelist: role
      }
      this.userShow = true
    },
    async add () {
      this.saveLoading = true
      if (this.userList.password !== this.userList.passwordc) {
        this.$tips.error('密码两次输入不一致')
        this.saveLoading = false
        return false
      }
      this.$refs['userList'].validate(async (valid) => {
        if (valid) {
          let role = []
          let roleAll = this.$util.arrToStr(this.userList.rolelist)
          this.userPower.forEach(item => {
            if (roleAll.indexOf(item.id) > -1) {
              role.push(item)
            }
          })

          const res = await this.$http('sysAccountAdd', {
            company_id: this.user.company_id,
            company_name: this.user.company_name,
            ...this.userList,
            rolelist: role,
            login_flag: '1'
          })
          if (res.errcode === 0) {
            this.$tips.success('添加成功，账号为:' + res.data.login_name)
          } else {
            this.$tips.success(res.errmsg)
          }

          this.cancel()
          this.init()
        } else {
          this.$tips.error('请检查必填项')
          this.saveLoading = false
          return false;
        }
      })
    },
    async save () {
      this.saveLoading = true
      if (this.userList.password !== this.userList.passwordc) {
        this.$tips.error('密码两次输入不一致')
        this.loading = false
        return false
      }
      this.$refs['userList'].validate(async (valid) => {
        if (valid) {
          let role = []
          let roleAll = this.$util.arrToStr(this.userList.rolelist)
          this.userPower.forEach(item => {
            if (roleAll.indexOf(item.id) > -1) {
              role.push(item)
            }
          })

          const res = await this.$http('sysUserEdit', {
            company_id: this.user.company_id,
            company_name: this.user.company_name,
            ...this.userList,
            rolelist: role,
          })
          this.$tips.success(res.errmsg)
          this.cancel()
          this.init()
        } else {
          this.$tips.error('请检查必填项')
          this.saveLoading = false
          return false;
        }
      })
    },
    cancel () {
      this.userList = {}
      this.userShow = false
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  }
}
</script>
<style lang='scss' scoped>
</style>